<template>
  <div class="content-outer">
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="商户号名称">
          <template slot="content">
            <el-input
              v-model="requestData.body"
              clearable
              placeholder="请输入商户号名称"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="商户号">
          <template slot="content">
            <el-input
              v-model="requestData.merchant_id"
              clearable
              placeholder="请输入商户号"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="clickSearch('查询')"
            >查询</el-button>
            <el-button @click="reset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block class="content-table">
      <div class="action-box">
        <div class="left"></div>
        <div class="right">
          <el-button
            v-permission:merchant-add
            type="primary"
            @click="add('新增')"
          >新增商户号</el-button>
        </div>
      </div>
      <div
        v-permission:merchant-index
        class="table-table"
      >
        <BiTable
          :loading="loading"
          :data="tableData"
          size="medium"
          :column="tableColums"
          fixed="sticky"
          fixed-offset="50"
          pagination
          layout="total, prev, pager, next"
          :auto-scroll="false"
          :total="page_info.total"
          :page.sync="page_info.page"
          :limit.sync="page_info.page_size"
          @pagination="handlePageChange"
        >
          <template v-slot:private_key="{ row }">
            <div class="rowFlex columnCenter">
              <el-popover
                placement="top"
                width="300"
                trigger="hover"
              >
                <div class="popoverText">
                  <p>{{ row.private_key }}</p>
                </div>
                <div slot="reference">
                  <el-button
                    size="medium"
                    type="text"
                  >私钥</el-button>
                </div>
              </el-popover>
              <svg-icon
                icon-class="copy"
                class="icon"
                @click="clickCopy(row.private_key)"
              />
            </div>
          </template>
          <template v-slot:api_secret="{ row }">
            <div class="rowFlex columnCenter">
              <el-popover
                placement="top"
                trigger="hover"
              >
                <div>
                  <p>{{ row.api_secret }}</p>
                </div>
                <div slot="reference">
                  <el-button
                    size="medium"
                    type="text"
                  >秘钥</el-button>
                </div>
              </el-popover>
              <svg-icon
                icon-class="copy"
                class="icon"
                @click="clickCopy(row.api_secret)"
              />
            </div>
          </template>
          <template v-slot:serial="{ row }">
            <div class="rowFlex columnCenter">
              <el-popover
                placement="top"
                trigger="hover"
              >
                <div>
                  <p>{{ row.serial }}</p>
                </div>
                <div slot="reference">
                  <el-button
                    size="medium"
                    type="text"
                  >证书序列号</el-button>
                </div>
              </el-popover>
              <svg-icon
                icon-class="copy"
                class="icon"
                @click="clickCopy(row.serial)"
              />
            </div>
          </template>
          <template v-slot:zip="{ row }">
            <el-button
              v-permission:merchant-edit
              type="text"
              size="medium"
              @click="edit(row)"
            >编辑</el-button>
            <el-popconfirm
              icon="el-icon-info"
              icon-color="red"
              style="margin-left:10px;"
              title="确定删除吗？"
              @confirm="delRow(row)"
            >
              <el-button
                slot="reference"
                v-permission:merchant-del
                type="text"
                size="medium"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </BiTable>
      </div>
    </Block>
    <BiDrawer
      v-if="drawer.visible"
      v-model="drawer.visible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="addMerchant"
      drawer-size="540"
      @ok="onSubmit"
    ></BiDrawer>
  </div>
</template>

<script>
import BiDrawer from '@/components/BiDrawer'
import addMerchant from './component/addMerchant.vue'
import { merchantList, merchantDel } from '@/api/recharge'
export default {
  name: 'Pays',
  components: {
    BiDrawer
  },
  data() {
    return {
      drawer: {
        visible: false,
        title: '新增商户号',
        row: {}
      },
      addMerchant: addMerchant,
      addMerchantDrawer: false,
      requestData: {
        body: '',
        merchant_id: ''
      },
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableData: [],
      tableColums: [
        {
          label: '名称',
          prop: 'body',
          width: '140'
        },
        {
          label: '商户号',
          prop: 'merchant_id',
          width: '140'
        },
        {
          label: '主体',
          prop: 'body_abbreviation'
        },
        {
          label: '关联公众号',
          prop: 'official_name',
          width: '160'
        },
        {
          label: '商户支付私钥',
          prop: 'private_key',
          slotScope: true,
          width: '120'
        },
        {
          label: '商户支付秘钥',
          prop: 'api_secret',
          width: '120',
          slotScope: true
        },
        {
          label: '证书序列号',
          prop: 'serial',
          width: '140',
          slotScope: true
        },
        {
          label: '正在使用的小程序/微信小程序支付',
          prop: 'mini_app_name'
        },
        {
          label: '正在使用的小程序/客服消息支付',
          prop: 'customer_mini_app_name'
        },
        {
          label: '操作',
          prop: 'zip',
          width: 160,
          fixed: 'right',
          align: 'left',
          slotScope: true
        }
      ]
    }
  },

  mounted() {
    this.initData()
    this.$AccessReport.report('zhangyu-merchant', [this.$store.state.user.routerItem.name, '支付管理', '商户号管理'])
  },
  methods: {
    initData() {
      this.clickSearch()
    },
    clickSearch(type) {
      if (type == '查询') {
        this.page_info.page = 1
      }
      const data = {
        body: this.requestData.body,
        merchant_id: this.requestData.merchant_id
      }
      this.loading = true
      merchantList({ ...data, ...this.page_info }).then((res) => {
        this.loading = false
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
      })
    },
    clickCopy(msg) {
      const input = document.createElement('input')
      // input.hidden = true
      input.setAttribute('value', msg)
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功')
    },
    reset() {
      this.$set(this, 'requestData', {
        body: '',
        merchant_id: ''
      })
      this.$set(this, 'page_info', {
        page: 1,
        page_size: 20,
        total: 0
      })
    },
    add(title) {
      this.drawer.title = '新增商户号'
      this.drawer.row = {}
      this.drawer.visible = true
    },
    edit(row) {
      this.drawer.title = '编辑商户号'
      this.drawer.row = row
      this.drawer.visible = true
    },
    delRow(row) {
      merchantDel({ id: row.id }).then((res) => {
        if (res.status_code === 1) {
          this.$message.success(res.msg)
          setTimeout(() => {
            this.clickSearch()
          }, 500)
        }
      })
    },
    handlePageChange(page) {
      this.page_info.page = page.page
      this.clickSearch()
    },
    onSubmit(data) {
      this.clickSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.content-outer {
    .content-head {
    }
    .content-table {
        .action-box {
            .left {
            }
            .right {
            }
        }
        .table-table {
            .rowFlex {
                .popoverText {
                    p {
                    }
                }
                div {
                }
                .icon {
                }
            }
            .columnCenter {
            }
            .rowFlex {
                div {
                    p {
                    }
                }
                div {
                }
                .icon {
                }
            }
            .rowFlex {
                div {
                    p {
                    }
                }
                div {
                }
                .icon {
                }
            }
        }
    }
}.game-name {
  display: flex;
  align-items: center;
  .svg-icon-box {
  }
  .private_key {
    width: 120px;
    height: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
  }
}
.popoverText {
  width: 280px;
  height: 300px;
  overflow: auto;
}
.icon {
  font-size: 16px;
  color: #06c261;
  margin-left: 10px;
  cursor: pointer;
}
</style>
